<template>
  <div class="avatar">
    <div class="group">
      <b-avatar class="item" />
      <b-avatar class="item" shape="square" />
      <b-avatar class="item" size="80px" />
      <b-avatar class="item" size="80px" shape="square" />
      <b-avatar class="item" size="30px" />
      <b-avatar class="item" size="30px" shape="square" />
      <b-avatar class="item" size="120px" />
      <b-avatar class="item" size="120px" shape="square" />
    </div>
    <div class="group">
      <h4>传入icon 或者src设置头像</h4>
      <b-avatar class="item" icon="iconfont icon-longxiao" />
      <b-avatar class="item" icon="iconfont icon-longxiao" shape="square" />
      <b-avatar class="item" icon="iconfont icon-longxiao" size="80px" />
      <b-avatar class="item" size="80px" shape="square" mask>
        <img src="https://portrait.gitee.com/uploads/avatars/user/2534/7602838_fudaosheng_1595768126.png!avatar100" alt="">
        <i slot="mask" class="vbestui-iconfont icon-success-m"></i>
      </b-avatar>
      <b-avatar
        class="item"
        src="https://portrait.gitee.com/uploads/avatars/user/2534/7602838_fudaosheng_1595768126.png!avatar100"
      />
      <b-avatar
        class="item"
        src="https://portrait.gitee.com/uploads/avatars/user/2534/7602838_fudaosheng_1595768126.png!avatar100"
      />
      <b-avatar
        class="item"
        src="https://portrait.gitee.com/uploads/avatars/user/2534/7602838_fudaosheng_1595768126.png!avatar100"
        shape="square"
      />
      <b-avatar
        class="item"
        src="https://portrait.gitee.com/uploads/avatars/user/2534/7602838_fudaosheng_1595768126.png!avatar100"
        size="80px"
      />
      <b-avatar
        mask
        mask-content="点击更换头像"
        class="item"
        src="https://portrait.gitee.com/uploads/avatars/user/2534/7602838_fudaosheng_1595768126.png!avatar100"
        size="120px"
        shape="square"
      />
    </div>
    <div class="group">
      <h4>自定义头像</h4>
      <b-avatar class="item">
        <div class="individual">user</div>
      </b-avatar>
      <b-avatar class="item" shape="square">
        <div class="individual">user</div>
      </b-avatar>
      <b-avatar class="item" size="30px">
        <div class="individual" style="backgroundColor:var(--warning)">u</div>
      </b-avatar>
      <b-avatar class="item" size="30px" shape="square">
        <div class="individual" style="backgroundColor:var(--warning)">u</div>
      </b-avatar>
    </div>

    <div class="group">
      <b-avatar class="item" mask mask-content="点击更换头像" @clickMask="handleClickMask"/>
      <b-avatar class="item" shape="square" mask mask-content="点击更换头像"/>
      <b-avatar class="item" size="120px" mask mask-content="点击更换头像" />
      <b-avatar class="item" size="120px" shape="square" mask mask-content="点击更换头像" />
    </div>
  </div>
</template>
<script>
export default {
  name: "AvatarPage",
  methods:{
      handleClickMask(){
          console.log('click mask');
      }
  }
};
</script>
<style scoped>
h4 {
  padding: 15px 0px;
}
.group {
  padding: 15px 0px;
}
.item {
  margin-right: 15px;
}
.individual {
  width: 100%;
  height: 100%;
  background: var(--primary);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>